<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="">

<head>
    <meta charset="utf-8" />
    <title>购物车</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/shopping_car.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body {
            background-color: #ededed;
        }
    </style>
</head>

<body>
<%--头部--%>
<jsp:include page="/components/header.jsp"></jsp:include>
<div class="container">
<%--   左侧菜单--%>
    <jsp:include page="/components/sidebar.jsp"></jsp:include>
    <!--    内容-->
    <div class="content">
        <div class="header">
            <div class="title">全部商品</div>
            <div class="hr"></div>
            <div class="go-home">
                <a href="/home" class="check-button">继续购物</a>
            </div>
        </div>
        <div class="details">
            <c:forEach var="cart" items="${cartlist}">
              <div class="item">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" class="ck" tpId="${cart.tpId}" price="${cart.tpPrice}" onclick="totalprice()">
                    </label>
                </div>
                <!-- 商品封面-->
                <div class="image">
                <a href="/productDetail?tpId=${cart.tpId}">
                    <img src="${cart.tpFileName}" alt="">
                </a>
                </div>
                <div class="title">
                        ${cart.tpName}
                </div>

                <div class="price">¥<span>${cart.tpPrice}</span></div>
                <div class="number">
							<span class="btn-group margin-num" role="group" aria-label="Basic example">
								<button type="button" class="btn btn-secondary" onclick="minus(this,${cart.tsId})">-</button>
								<input type="text" class="num" style="width: 30px;text-align: center" value="${cart.tsCount}"></input>
								<button type="button" class="btn btn-secondary" onclick="add(this,${cart.tsId})">+</button>
							</span>
                </div>
                <div class="control">
<%--                    <a href="/shopCart?m=del&tsId=${cart.tsId}" class="check-button">删除</a>--%>
                    <input type="button" class="check-button" value="删除" onclick="delShopcart(${cart.tsId})">
                </div>
            </div>
            </c:forEach>
        </div>
        <div class="bottom">
            <div class="check-all">
                <a href="javascript:removeShopcart()">清空所有</a>
                <span class="total">合计：<span class="price" id="totalprice">0.00</span></span>
                <!--                    <input type="button" value="多选" class="check-button">-->
                <input type="button" value="结算" class="check-button" onclick="createOrder()">
            </div>
        </div>
    </div>
</div>
<iframe name="footer_iframe" onload="this.height=this.contentWindow.document.body.scrollHeight" width=100%
        src="./components/footer.html" frameborder=0 scrolling="no"></iframe>
</body>

<script>
    //删除一条购物车记录
    function delShopcart(tsid){
        //给出提示框
       var f= confirm("您确定要删除？");
       if(f){
           //执行servlet删除请求
           window.location.href="/shopCart?m=del&tsId="+tsid;
       }
    }
    //清空购物车
    function removeShopcart(){
        var f= confirm("您确定要清空购物车？");
        if(f){
            //执行servlet删除请求
            window.location.href="/myorder?m=remove";
        }
    }
    //购物车数量 -
    function minus(obj,tsid) {
        //获取点击按钮
        // console.log($(obj));
        //获取父类元素
        var item =$(obj).parent().find(".num");
        //获取相邻文本框的值
        // alert($(item).val());
        //获取文本框的值， 转换成数字类型
        var num=parseInt($(item).val());
       if(num>1) {
           //如果文本框的值大于1， 可以减少数量
           num=num-1;
           $(item).val(num);
       }
       //跳转到servlet 进行数据修改
        window.location.href="/shopCart?m=update&tsId="+tsid+"&num="+num;

    }
    //购物车数量+
    function add(obj,tsid) {
        //获取点击按钮
        // console.log($(obj));
        //获取父类元素
        var item =$(obj).parent().find(".num");
        //获取相邻文本框的值
        // alert($(item).val());
        var num=parseInt($(item).val());
        num=num+1;
        $(item).val(num);
        //跳转到servlet 进行数据修改
        window.location.href="/shopCart?m=update&tsId="+tsid+"&num="+num;
    }
   // createOrder();
    function createOrder(){
        // 商品编号的集合
        var ids=[];
        //$.each($('.ck') 拿到所有类名ck的组件 循环
        $.each($('.ck'),function(index,obj){
            //判断是否选中
            var f= $(obj).prop("checked");
            if(f){
                //如果选中，给数组添加商品编号
                ids.push(parseInt($(obj).attr("tpId")));
            }
        })
        // alert(ids);
       window.location.href="/order?tpId="+ids;
    }

    function totalprice(){
        // 商品编号的集合
        var total=0.00;
        //$.each($('.ck') 拿到所有类名ck的组件 循环
        $.each($('.ck'),function(index,obj){
            //判断是否选中
            var f= $(obj).prop("checked");
            if(f){
                //如果选中，给数组添加商品编号
                let price= parseFloat($(obj).attr("price"));
                let num= parseInt($(obj).parent().parent().parent().find('.num').val())
                let xj=price*num;
                total=total+xj;
            }
        })
        // alert(total);
        $('#totalprice').text(total);
    }

</script>
</html>
